<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue组件</title>
</head>
<body>
    <div id="app">
        <component-a checked="true" @change="aaaChanged">aaa</component-a>
        <component-b myvalue="I'm jack" mycheck="true"></component-b>
        <component-b v-bind:myvalue="myValue" :mycheck="myCheck" @onchange1="aaaChanged"></component-b>
    </div>
</body>
<script src="../lib/vue.min.js"></script>
<script>
    // 全局组件
    Vue.component('component-a', {
       model: {
           prop: 'checked',
           event: 'change',
       },
       props: {
        checked: Boolean
       },
       template: `
       <input 
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"       
       > 
       `
    })
    

    // 局部组件
    var ComponentB = {
        model: {

        },
        props: {
            myvalue: String,
            mycheck: Boolean,
        },
        template: `
        <div>
            <input
                type="checkbox"
                v-bind:value="myvalue"                
                v-model="mycheck"
                @change="$emit('onchange1', $event.target.checked)"
            /> 
            <label>{{myvalue}}</label>
            <label>{{mycheck}}</label>
        </div>
        `
    }

    var vm = new Vue({
        el: "#app",
        data: {
            myCheck: false,
            myValue: "who?"
        },
        methods: {
            aaaChanged: function(v) {
                console.log("aaaChanged", v, this.myCheck, this.myValue)
            }
        },
        components: {
            'component-b': ComponentB,
        }
    })
</script>
</html>